import React, { useEffect, useState } from 'react';
import { connect, useDispatch, Link } from 'umi';
import { Table, Row, Col, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import PageTopFormContent from '@/components/PageTopFormContent';
import { ORG_TYPE_LIST } from '@/utils/const';
import PaginationCommon from '@/components/PaginationCommon';
import PositionManageTable from '@/components/PositionManageTable';

import styles from './OrgDetail.less';

const OrgDetail = (props) => {
  const {
    location: {
      state: { orgDetailData },
    },
    loading: { effects },
  } = props;
  const { id: orgId } = orgDetailData;
  const [currentPageNum, setcurrentPageNum] = useState(1);
  const [currenPageSize, setCurrenPageSize] = useState(10);
  const [orgList, setOrgList] = useState([]);
  const [orgListTotal, setOrgListTotal] = useState([]);
  const dispatch = useDispatch();

  useEffect(() => {
    if (orgId) {
      const currentData = {
        pageIndex: currentPageNum,
        pageSize: currenPageSize,
        parentId: orgId,
      };
      dispatch({
        type: 'orgManageModel/getOrgListOfDetailPage',
        payload: currentData,
      }).then((res) => {
        const { code, data, message: errMsg } = res;
        if (code === 0 && data) {
          const { dataList, total } = data;
          setOrgList(dataList);
          setOrgListTotal(total);
        } else {
          message.error(errMsg);
        }
      });
    }
  }, [orgId, currentPageNum, currenPageSize, dispatch]);

  const handlePaginationChange = (page, pageSize) => {
    setcurrentPageNum(page);
    setCurrenPageSize(pageSize);
  };

  const columnsOrg = [
    {
      title: '组织名称',
      dataIndex: 'orgName',
      key: 'orgName',
    },
    {
      title: '组织类型',
      dataIndex: 'orgType',
      key: 'orgType',
      render: orgType => (ORG_TYPE_LIST.filter(item => item.value === orgType)[0] || {}).text,
    },
    {
      title: '岗位数',
      dataIndex: 'positionNum',
      key: 'positionNum',
    },
    {
      title: '有效性',
      dataIndex: 'orgState',
      key: 'orgState',
      render: text => (
        <span style={{ color: `${text === 1 ? '#1E8E3E' : '#999999'}` }}>
          ●
          {text === 0 ? '无效' : '有效'}
        </span>
      ),
    },
    {
      title: '生效时间',
      dataIndex: 'expireStartTime',
      key: 'expireStartTime',
    },
    {
      title: '失效时间',
      dataIndex: 'expireEndTime',
      key: 'expireEndTime',
    },
  ];

  return (
    <div className={styles.root}>
      <PageTopFormContent
        title={(
          <Link to="/authoritymanage/orgmanage" style={{ color: 'unset' }}>
            <ArrowLeftOutlined style={{ marginRight: 16, cursor: 'pointer' }} />
            组织详情
          </Link>
        )}
      />
      <div className={styles.blockWrapper}>
        <div className={styles.title}>基本信息</div>
        <div className={styles.contentWrapper}>
          <Row gutter={[16, 16]}>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>组织名称：</span>
              {orgDetailData.orgName || orgDetailData.title}
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>组织类型：</span>
              <span>{(ORG_TYPE_LIST.filter(item => item.value === orgDetailData.orgType)[0] || {}).text}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>岗位数：</span>
              <span>{orgDetailData.positionNum}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>数据来源：</span>
              <span>{orgDetailData.dataSource}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>业务层级：</span>
              <span>{orgDetailData.businessLevel}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>有效性：</span>
              <span>{orgDetailData.orgState === 0 ? '无效' : '有效'}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>生效时间：</span>
              <span>{orgDetailData.expireStartTime}</span>
            </Col>
            <Col className="gutter-row" span={6}>
              <span className={styles.labelTitle}>失效时间：</span>
              <span>{orgDetailData.expireEndTime}</span>
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>描述：</span>
              <span>{orgDetailData.orgDesc}</span>
            </Col>
          </Row>
        </div>
      </div>
      <div className={styles.blockWrapper}>
        <div className={styles.title}>下级组织</div>
        <div className={styles.contentWrapper}>
          <Table
            columns={columnsOrg}
            dataSource={orgList}
            pagination={false}
            loading={effects['orgManageModel/getOrgListOfDetailPage']}
          />

          <PaginationCommon
            total={orgListTotal}
            onChange={handlePaginationChange}
            style={{ textAlign: 'right' }}
            current={currentPageNum}
            pageSize={currenPageSize}
          />
        </div>
      </div>
      <div className={styles.blockWrapper}>
        <PositionManageTable orgId={orgId} showOperateColumn={false} showAddOperate={false} />
      </div>
    </div>
  );
};

export default connect(state => state)(OrgDetail);
